<template>
	<view>
		<view class="tx" @tap="updateimg()">
			<image :src="icon" mode=""></image>
		</view>

		<view class="inp">
			<uni-easyinput v-model="number" :inputBorder="false" placeholder="手机号"></uni-easyinput>
		</view>
		<view class="inp">
			<uni-easyinput v-model="password" :inputBorder="false" type="password" placeholder="登录密码"></uni-easyinput>
		</view>
		<view class="inp">
			<uni-easyinput v-model="username" :inputBorder="false" placeholder="用户名"></uni-easyinput>
		</view>
		<view class="inp">
			<uni-easyinput v-model="nickname" :inputBorder="false" placeholder="昵称"></uni-easyinput>
		</view>
		<view class="inp">
			<uni-easyinput :inputBorder="false" placeholder="验证码"></uni-easyinput>
		</view>

		<view class="button" @tap="ok">
			注册
		</view>

		<view class="box" @tap="agree = !agree">
			<view class="dot">
				<view class="dot1" v-if="agree">

				</view>
			</view>
			<view class="text">
				同意 《协议》
			</view>
		</view>


	</view>
</template>

<script>
	import WxValidate from "@/utils/validate.js"
	import {register} from "@/api/mine/mine.js"
	import baseUrl from "@/api/baseUrl.js"
	export default {
		data() {
			return {
				agree: false,
				number: '',
				password: '',
				username: '',
				nickname: '',
				icon:'/static/icons/leju-logo.png',
			}
		},
		onLoad() {
			this.initValidate();
		},
		methods: {
			ok() {
				var params = {
					number:this.number,
					password:this.password,
					username:this.username,
					nickname:this.nickname
				}
				if(!this.WxValidate.checkForm(params)){
					let error = this.WxValidate.errorList[0];
					console.log(error)
				}else{
					if(!this.agree){
						uni.showToast({
							title:"请勾选协议",
							icon:"none"
						})
					}else{
						register({
							icon:this.icon,
							nickname:this.nickname,
							password:this.password,
							phone:this.number,
							username:this.username
						}).then(res=>{
							console.log(res)
							uni.navigateTo({
								url:"/pages/mine/login/login"
							})
						})
					}
					
					
				}
			},
			updateimg(){
				var _this = this;
				uni.chooseImage({
					count:1,
					sizeType:['original','compressed'],
					success(res){
						// console.log(res)
						var files = res.tempFilePaths[0];
						uni.uploadFile({
							url:baseUrl + "/lejuClient/login/uploadAvatar",
							filePath:files,
							name:"file",
							success(res1){
								console.log(res1);
								_this.icon = JSON.parse(res1.data).data.fileUrl;
							}
						})
					}
				})
			},
			initValidate() {
				let rules = {
					number: {
						required: true,
						tel: true
					},
					password: {
						required: true,
						minlength: 6,
						maxlength: 10
					},
					username: {
						required: true,
					},
					nickname: {
						required: true,
					},
				}

				let message = {
					number: {
						required: '必填',
						tel:'请输入正确手机号'
					},
					password: {
						required: '必填',
						minlength: '至少6位',
						maxlength: '最多10位'
					},
					username: {
						required: '必填',
						tel:'请输入正确手机号'
					},
					nickname: {
						required: '必填',
						
					},

				}
				//实例化当前的验证规则和提示消息
				this.WxValidate = new WxValidate(rules, message);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tx {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin: 100rpx auto;


		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.inp {
		margin: 0 auto;
		width: 80%;
		padding: 15rpx;

		border-radius: 2.5rem;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 0 20rpx 0 #d9d9d9;


	}

	.button {
		width: 600rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: #354e44;
		color: #fff;
		line-height: 100rpx;
		text-align: center;
		margin: 100rpx auto;
	}

	.box {
		width: 100%;
		// text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;

		.dot {
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			border: 1rpx solid #000;
			display: flex;
			justify-content: center;
			align-items: center;

			.dot1 {
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				background-color: #000;
				// margin: 0 auto;
			}
		}
	}

	.text {
		font-size: 24rpx;
	}
</style>
